<template>
  <a-grid :cols="24" :row-gap="16" class="panel">
    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
      <a-space>
        <SvgIcon name="enterprise-car-model" class="col-avatar" />
        <a-statistic title="企业车型数" :value="briefInfo.carModelNum" :value-from="0" animation show-group-separator>
          <template #suffix><span class="unit">个</span> </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
      <a-space>
        <SvgIcon name="enterprise-car" class="col-avatar" />
        <a-statistic title="企业车辆数" :value="briefInfo.carNum" :value-from="0" animation show-group-separator>
          <template #suffix>
            <span class="unit">辆</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
      <a-space>
        <SvgIcon name="enterprise-staff" class="col-avatar" />
        <a-statistic title="企业员工数" :value="briefInfo.staffNum" :value-from="0" animation show-group-separator>
          <template #suffix>
            <span class="unit">名</span>
          </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }" style="border-right: none">
      <a-space>
        <SvgIcon name="enterprise-client" class="col-avatar" />
        <a-statistic title="企业会员数" :value="briefInfo.clientNum" :value-from="0" animation>
          <template #suffix> 名 </template>
        </a-statistic>
      </a-space>
    </a-grid-item>
    <a-grid-item :span="24">
      <a-divider class="panel-border" />
    </a-grid-item>
  </a-grid>
</template>

<script setup name="EnterpriseBasicInfoSummaryPanel">
  import { reactive } from 'vue'
  import { getEnterpriseBriefInfo } from '@/api/asset/enterprise.js'

  const briefInfo = reactive({
    carModelNum: 0,
    carNum: 0,
    clientNum: 0,
    staffNum: 0,
  })
  getEnterpriseBriefInfo().then((res) => {
    if (res.code == 200) {
      const result = res.result
      console.log(result)
      briefInfo.carModelNum = result.carModelNum
      briefInfo.carNum = result.carNum
      briefInfo.clientNum = result.clientNum
      briefInfo.staffNum = result.staffNum
    }
  })
</script>

<style lang="less" scoped>
  .arco-grid.panel {
    margin-bottom: 0;
    padding: 4px 0 0;
  }
  .panel-col {
    padding-left: 43px;
    border-right: 1px solid rgb(var(--gray-2));
  }
  .col-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    margin-right: 12px;
    background-color: var(--color-fill-2);
  }
  .up-icon {
    color: rgb(var(--red-6));
  }
  .unit {
    margin-left: 8px;
    color: rgb(var(--gray-8));
    font-size: 12px;
  }
  :deep(.panel-border) {
    margin: 4px 0 0 0;
    border-bottom: 1px solid rgb(var(--gray-2));
  }
</style>
